<template>
    <div class="shichangjiandu">
        <!-- 数据汇总 -->
        <div class="summary data-summary">
            <div class="title flex">
                <div class="title-icon">
                    <img src="@/assets/images/shichangjiandu/data-icon.png">
                    <span>数据汇总</span> 
                </div>
                <div class="title-bg">
                    <img src="@/assets/images/shichangjiandu/data-bg.png">
                </div>
            </div>
            <div class="summary-content">
                <div class="summary-content-item">
                    <div class="content-img">
                        <img src="@/assets/images/shichangjiandu/data.png">
                    </div>
                    <div class="content-text">
                        <div>
                            累计案件受理量
                        </div>
                        <div>
                            {{ summary.num || 0 }}
                        </div>
                    </div>
                   
                </div>
                <div class="summary-content-item">
                    <div class="content-img">
                        <img src="@/assets/images/shichangjiandu/data.png">
                    </div>
                    <div class="content-text">
                        <div>
                            本年度案件受理量
                        </div>
                        <div>
                            {{ summary.yearNum || 0 }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { MarketSurveillanceDB } from '@/api'
export default {
    data() {
        return {
            summary: {},
        }
    },
    created() {
       this.getDataSummary()
    },
    methods: {
        getDataSummary() {
            MarketSurveillanceDB.getNum({
                orgId:'1301571732182839297'
            }).then((res)=>{
                if(res.data && res.data.length > 0) {
                    this.summary = res.data[0]
                } else {
                    this.summary = {}
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.shichangjiandu {
    .summary {
       
        .title {
            border-bottom: 1px solid rgba(255,255,255,0.4);
            position: relative;
            height: 42px;
             ::after{
                content: '';
                height: 1px;
                width: 7px;
                position: absolute;
                left: 0;
                bottom: 0;
                background: #fff;
            }
            .title-icon {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                font-size: 18px;
                font-weight: bold;
                color: #FFFFFF;
                img {
                    width: 42px;
                    height: 42px;
                }
                span {
                    display: inline-block;
                    height: 42px;
                    line-height: 42px;
                }
            }
            .title-bg {
                display: flex;
                justify-content: flex-end;
                align-items: center;
                img{
                    width: 227px;
                    height: 10px;
                }
             
            }
            >div{
                width: 50%;
            }

        }

        .summary-content {
            height: 100px;
            display: flex;
            justify-content: space-between;
            .summary-content-item {
                display: flex;
                width: 50%;
               .content-img {
                    height: 100px;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    img{
                        width: 89px;
                        height: 53px;
                    }
               }
               .content-text {
                    padding-left: 16px;
                    >div:nth-child(1) {
                        height: 50px;
                        font-size: 16px;
                        font-weight: 400;
                        color: #EFF0F1;
                        line-height: 60px;
                    }
                    >div:nth-child(2) {
                        font-size: 24px;
                        font-weight: bold;
                        color: #6ACBFF;
                    }
               }
            }
        }
    }
}
</style>